<script setup>
import {onMounted, ref} from "vue";
import {usePage} from "@inertiajs/vue3";
import {route} from "ziggy-js";
import http from "@/lib/http";
import {Message} from "@arco-design/web-vue";
import AppPage from "@/components/admin/layouts/AppPage.vue";
import {MpMenu} from "mp-menu"
import 'mp-menu/dist/style.css'

defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
})

const title = '自定义菜单 - 公众号 - 设置'
const breadcrumbs = ref(['设置', '公众号', '自定义菜单'])

const page = usePage()

const mpMenuRef = ref();

const onsubmit = async () => {
    console.log('getButtons',mpMenuRef.value.getButtons())
    await http.post(route('admin.setting.wechat.menus.update'), {
        data: mpMenuRef.value.getButtons()
    })
    Message.success('发布成功')
}
// 初始化数据
onMounted(() => {
    const data = page.props.data || [];
    console.log('menus',data)
    mpMenuRef.value.update(data ?? [
        {
            name: '子菜单名称',
            type: 'view',
            url: "",
            appId: "",
            pagePath: ""
        }
    ])
});
</script>

<template>
    <app-page :breadcrumbs :title>
        <div class="flex-1 size-full overflow-hidden">
            <MpMenu ref="mpMenuRef">
                <a-button type="primary" @click="onsubmit">发布菜单</a-button>
            </MpMenu>
        </div>
    </app-page>
</template>

<style lang="scss" scoped>
.custom-divider{
    border-bottom: 1px solid var(--color-neutral-4);
    :deep(.arco-divider-text){
        font-size: 18px;
        font-weight: bold;
    }
}
</style>
